<!-- 评论列表 -->
<template>
  <div>
      <el-card shadow="always" :body-style="	{ padding: '40px' }" class="argue">
          <span id="title">全部165条评论</span>
          <div class="my-argue">
              <div class="my-face">
                  <img src="@/images/3.png" alt="" width="70px" height="70px">
              </div>
              <div class="my-input">
                  <el-input
  type="textarea"
  autosize
  placeholder="请输入内容"
  v-model="textarea">
</el-input>  
<el-button type="warning">发送</el-button>
              </div>
          </div>
          <div class="other-argue" v-for="item in 10" :key="item">
              <div class="other-face">
                
                   <el-popover placement="left" width="300px" trigger="hover"  style="border-shadow:5px 5px 5px 5px #eee; margin:0; padding:0;">
              <author-card></author-card>
              <a href="#" slot="reference">
                 <img src="@/images/3.png" alt="" width="70px" height="70px">
              </a>
            </el-popover>
              </div>
               <div class="other-con">
              <span id="con">
                  哈哈哈哈
              </span><br>
              <img src="@/assets/icon1/dianzan.svg" alt="" width="20px" v-if="dianzan" @click.prevent="dianzan=false">
              <img src="@/assets/icon1/dianzansucc.svg" alt="取消点赞" title="取消点赞" style="width:20px;" 
              v-else @click.prevent="dianzan=true">
                <span>点赞</span>
                <a href="#" @click.prevent="show=!show"> <span id="back">回复</span></a>
               
                <div class="other-input" v-show="show">
                  <el-input
  type="textarea"
  autosize
  placeholder="请输入内容"
  v-model="textarea">
</el-input>  
<el-button type="warning">发送</el-button>
              </div>
          </div>

          </div>
               <div class="fenye" style="text-align:center;margin:80px auto;">
        <el-pagination
  background
  layout="prev, pager, next"
  :total="1000">
</el-pagination>
      </div>
      </el-card>
  </div>
</template>

<script>
import AuthorCard from '@/components/photoInfo/authorCard.vue'
export default {
  data () {
    return {
        dianzan:false,
        show:false
    };
  },
components:{
    AuthorCard
},
  methods: {}
}

</script>
<style lang='scss' scoped>
.argue{
    #title{
        font-size:18px;
        letter-spacing: 1.5px;
        color:#909399;
        line-height: 40px;
    }
    .my-argue{
        height: 90px;
        margin-top:20px;
        .my-face{
 float: left;
        width:90px;
        height: auto;
        }
        .my-input{
            margin-left:100px;
            .el-button{
                float:right;
            }
        }
       
    }
       .other-argue{
        height: auto;
        margin:40px 0;
        .other-face{
 float: left;
        width:90px;
        height: auto;
        }
        .other-con{
           margin-left:100px;
           #con{
               font-size: 18px;
               letter-spacing: 1.5px;
               line-height: 40px;
           }
            img {
        cursor: pointer;
        transition: all 0.6s;
      }
      img:hover {
        transform: scale(1.4);
      }
      #back{
          margin-left:20px;
          font-size:16px;
          letter-spacing: 1.5px;
          color:#909399;
      }
      .other-argue{
          
          .el-input{
              
          }
      }
        }
       
    }
}
</style>